import {
  DesktopOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Menu, type MenuProps } from "antd";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useLocation } from "react-router-dom";

type MenuItem = Required<MenuProps>["items"][number];

const items: MenuItem[] = [
  { label: "首页", key: "/home", icon: <PieChartOutlined /> },
  { label: "关于我们", key: "/about", icon: <DesktopOutlined /> },
  {
    label: "用户管理",
    key: "/user",
    icon: <UserOutlined />,
    children: [
      { label: "用户一", key: "/user/user01" },
      { label: "用户二", key: "/user/user02" },
      { label: "用户三", key: "/user/user03" },
    ],
  },
  {
    label: "团队管理",
    key: "/team",
    icon: <TeamOutlined />,
    children: [
      { label: "团队一", key: "/team/team01" },
      { label: "团队二", key: "/team/team02" },
      { label: "团队三", key: "/team/team03" },
    ],
  },
];

const MenuComp: React.FC = () => {
  const navigateTo = useNavigate();
  const menuClick = (key: string) => {
    console.log(key);
    navigateTo(key);
  };
  const currentRouter = useLocation();
  console.log("currentRouter", currentRouter.pathname); // 获取当前路由

  let firstOpenKeys: string = "";
  let arr = currentRouter.pathname.split("/");
  if (arr.length > 2) {
    firstOpenKeys = "/" + arr[arr.length - 2];
  }
  const [openKeys, setOpenKeys] = useState<string[]>([firstOpenKeys]);

  const handleOpenChange = (keys: string[]) => {
    console.log("12312312", keys);
    setOpenKeys([keys[keys.length - 1]]);
  };

  return (
    <Menu
      theme="dark"
      defaultSelectedKeys={[currentRouter.pathname]}
      mode="inline"
      items={items}
      onClick={(e) => {
        menuClick(e.key as string);
      }}
      openKeys={openKeys}
      onOpenChange={handleOpenChange}
    />
  );
};

export default MenuComp;
